<template>
<div>

  <el-row>
    <el-col :span="4"><el-input v-model="stuClass" placeholder="输入班级"></el-input></el-col>
    <el-col :span="4"><el-button type="primary">查询</el-button>
      <el-button type="warning" @click="saveStudents">保存</el-button></el-col>
    <el-col :span="12"></el-col>
  </el-row>

  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="序号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="stuID"
        label="学号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="stuName"
        label="姓名">
    </el-table-column>
    <el-table-column
        prop="stuClass"
        label="班级">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
      <template slot-scope="scope">
        <el-select v-model="scope.row.status" placeholder="请选择" @change="changeStatus(scope.row)">
          <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
  data() {
    return {
      stuClass:'',
      statusList:[
        {statusId:1,label:'在校学习',value:'在校学习'},
        {statusId:2,label:'休学',value:'休学'},
        {statusId:3,label:'退学',value:'退学'},
        {statusId:4,label:'已就业',value:'已就业'}
      ],

      tableData: [{
        id: 4,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        status:'已退学'
      }, {
        id: 1,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        status:'已退学'
      }, {
        id: 2,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        status:'已退学'
      }, {
        id: 3,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        status:'已退学'
      }]
    };
  },
  methods: {
    changeStatus(row){
      for(let i=0;i<this.tableData.length;i++){
        if(this.tableData[i].id==row.id){
          this.tableData[i].status=row.status;
        }
      }
    },
    findAllStudent(){
      this.$axios({
        url:'/findAllStudents',
        method:'get'
      }).then(res=>{
        console.log(res)
        this.tableData=res.data
      })
    },
    saveStudents(){
      this.$axios({
        url:'/saveStudents',
        method:'post',
        data:this.tableData
      }).then(res=>{
        console.log(res)
        // this.tableData=res.data
      })
    }

  },
  created(){
    this.findAllStudent();
  }
}
</script>